<!--
 * @Description 新增角色
-->
<template>
  <el-dialog
    :title="dialogData.title"
    :visible.sync="dialogData.show"
    :before-close="handleClose"
    width="46%"
    class="dialog"
  >
    <div class="dialog-root">
      <p
        style="font-size: 20px; font-weight: bold; margin: 0"
        :style="{ color: '#FF000DFF' }"
      >
        {{ dialogData.type == "DEL" ? "确认删除此角色?" : "" }}
      </p>
      <div class="content-root" style="margin-top: 16px">
        <div class="line-between" style="margin-top: 16px">
          <span style="color: #777e8aff; font-size: 14px">角色名称：</span>
          <span style="color: #030617d9; font-size: 14px">{{
            roleInfoForm.roleName
          }}</span>
        </div>
        <div>
          <p style="color: #777e8aff; font-size: 14px">角色权限：</p>
          <el-tree
            ref="tree"
            :data="treeData"
            :default-checked-keys="roleInfoForm.menuIds"
            show-checkbox
            default-expand-all
            :check-strictly="false"
            check-on-click-node
            node-key="id"
            :props="defaultProps"
            :expand-on-click-node="false"
          ></el-tree>
        </div>
        <div class="line-between" style="margin-top: 16px">
          <p style="color: #777e8aff; font-size: 14px">备注：</p>
          <span style="color: #030617d9; font-size: 14px">{{
            roleInfoForm.remark
          }}</span>
        </div>
      </div>
      <div class="line-center" v-if="dialogData.type == 'DEL'">
        <el-button class="dialog-btn" @click="dialogCancel" plain
          >取消</el-button
        >
        <el-button
          class="dialog-btn"
          style="margin-left: 8px"
          @click="handleDelete"
          type="danger"
          v-preventReClick
          >删除</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
//请求
import { delRole } from "@/api/staff_role";

export default {
  components: {},
  props: {
    dialogData: {
      type: Object,
    },
  },
  data() {
    return {
      treeData: null,
      defaultProps: {
        children: "childNodeList",
        label: "menuName",
      },
      roleInfoForm: {
        roleName: "",
        menuIds: [],
        remark: "",
        treeData: [],
      },
    };
  },
  watch: {
    "dialogData.show": {
      immediate: true,
      handler: function (val, oldVal) {
        if (val) {
          this.$nextTick(() => {
            this.roleInfoForm = JSON.parse(JSON.stringify(this.dialogData));
            this.roleInfoForm.menuIds = this.roleInfoForm.bindMenuIds;
            let newTreeData = JSON.parse(
              JSON.stringify(this.dialogData.treeData)
            );
            newTreeData.forEach((item, index) => {
              item.disabled = true;
              if (item.childNodeList.length > 0) {
                item.childNodeList.forEach((cItem, cIndex) => {
                  cItem.disabled = true;
                });
              }
            });
            this.treeData = newTreeData;
            this.$refs.tree.setCheckedKeys(this.roleInfoForm.menuIds);
          });
        }
      },
    },
  },
  methods: {
    //删除角色
    handleDelete() {
      delRole({
        roleId: this.dialogData.roleId,
      })
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.$emit("dialogConfirm", "DEL");
          this.dialogData.show = false;
        })
        .catch(() => {});
    },
    dialogCancel() {
      this.dialogData.show = false;
    },
    //关闭弹窗
    handleClose() {
      this.dialogData.show = false;
    },
    //
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__title {
    font-weight: normal;
  }
}

.dialog {
  a {
    color: #409eff;
  }
}

.el-form-item {
  margin-bottom: 10px;
}

::v-deep {
  .el-dialog__body {
    padding: 10px 20px;
  }
}

.input-area {
  width: 100%;
}

.el-tree {
  height: 320px;
  overflow: scroll;
  border: 1px solid #999999;
}

.dialog-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-root {
  width: 100%;
  padding: 16px;
  padding-top: 0;
  background: #fbfbfc;
  border-radius: 8px;
}

.line-between {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.line-center {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-btn {
  height: 32px;
  width: 120px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>